<!--  -->
<template>
  <div class="FXset">
    <HeaderTop title="分销设置"></HeaderTop>
    <div class="FXset-container">
      <!-- 左侧 分销名称 -->
      <div class=" FXname">
        <div class="dot"></div>
        <el-form ref="form1"  label-width="80px" class="form1">
          <div class="title">分销名称</div>

          <el-form-item label="一级">
            <el-input style="width:90px" v-model="names[0]"></el-input>
          </el-form-item>
          <el-form-item label="二级">
            <el-input style="width:90px" v-model="names[1]"></el-input>
          </el-form-item>
          <el-form-item label="三级">
            <el-input style="width:90px" v-model="names[2]"></el-input>
          </el-form-item>
          <el-form-item label="四级">
            <el-input style="width:90px" v-model="names[3]"></el-input>
          </el-form-item>
          <el-form-item label="五级">
            <el-input style="width:90px" v-model="names[4]"></el-input>
          </el-form-item>
          <el-form-item label="开通级别">
            <el-radio-group v-model="level" @change="showlevel">
              <el-radio :label="1">一级</el-radio>
              <el-radio :label="2">二级</el-radio>
              <el-radio :label="3">三级</el-radio>
              <el-radio :label="4">四级</el-radio>
              <el-radio :label="5">五级</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="reqUpdateName">设置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 右侧 分销利率设定 -->
      <div class=" FXinterest">
        <div class="dot"></div>
        <el-form ref="form2"  label-width="80px" class="form2">
          <div class="title">分销利率设定</div>
          <el-form-item label="一级">
            <el-input style="width:90px" v-model="partnerDistributes[0]"></el-input>
            <span>% (请保留2位小数)</span>
          </el-form-item>
          <el-form-item label="二级" >
            <el-input style="width:90px" v-model="partnerDistributes[1]" ></el-input>
            <span>% (请保留2位小数)</span>
          </el-form-item>
          <el-form-item label="三级" >
            <el-input style="width:90px" v-model="partnerDistributes[2]"></el-input>
            <span>% (请保留2位小数)</span>
          </el-form-item>
          <el-form-item label="四级" >
            <el-input style="width:90px" v-model="partnerDistributes[3]"></el-input>
            <span>% (请保留2位小数)</span>
          </el-form-item>
          <el-form-item label="五级" >
            <el-input style="width:90px" v-model="partnerDistributes[4]"></el-input>
            <span>% (请保留2位小数)</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="reqUpdatePartnerDistributes">设置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTop from '../../components/HeaderTop.vue'
export default {
  data () {
    return {
      userId:sessionStorage.getItem('userId'),
      names:[],
      partnerDistributes:[],
      level:1
    };
  },

  components: {
    HeaderTop
  },

  computed: {},

  created(){
   this.reqLookName();
  },
  methods: {
    showlevel(val){
      console.log('label',val)
      this.level=val
    },
    //获取分销名称及利率
    async reqLookName(){
     let result = await this.API.reqLookName({'managerInfoId':this.userId,
        token: sessionStorage.getItem('token'),})
     console.log(result)
     if(result.retCode == '000'){
        let arr = result.retData
        let names = []
        let level = 0
        let partnerDistributes = []
        arr.map(item=>{
           names.push(item.partnerName)
           level += item.status
           partnerDistributes.push(item.partnerDistribute.toFixed(2))
        })
        console.log(names,level,partnerDistributes)
        this.names = names
        this.level = level
        this.partnerDistributes=partnerDistributes
     }
    },
    //更新分销名称
    async reqUpdateName () {
      console.log(this.names)
      if(!this.names[0]||!this.names[1]||!this.names[2]||!this.names[3]||!this.names[4]){
        this.$message.error("请确认名称全部填写完成！")
        return
      }else{
        console.log(this.names,this.names.join(','))
        const params = {
          num:this.level,
          partnerNames:this.names.join(','),
          token:sessionStorage.getItem("token"),
          managerInfoId:sessionStorage.getItem('userId')
        }
        console.log(params)
        const result = await this.API.reqUpdateName(params)
        console.log(result)
        if (result.retCode == '000') {
          this.$message({
          message: '设置分销名称成功',
          type: 'success'
          }); 
        }
        }  
    },
    //更新分销利率
    async reqUpdatePartnerDistributes(){
      let doubleReg=/^[0-9]*.?[0-9]*$/;
      // let isOk = this.partnerDistributes.every(item=>{ 
      //   return item!=""&&doubleReg.test(item) 
      //   }) 
      // console.log(isOk)
      if(this.partnerDistributes[0]==''||this.partnerDistributes[1]==''||this.partnerDistributes[2]==''||this.partnerDistributes[3]==''||this.partnerDistributes[4]==''){
        this.$message.error("请确认利率全部填写完成！")
        return
      }else if((!doubleReg.test(this.partnerDistributes[0]))||(!doubleReg.test(this.partnerDistributes[1]))||(!doubleReg.test(this.partnerDistributes[2]))||(!doubleReg.test(this.partnerDistributes[3]))||(!doubleReg.test(this.partnerDistributes[4]))){
        this.$message.error("请确认利率为数字！")
        return
      }else{
         const params = {
          token: sessionStorage.getItem('token'),
          distributes:this.partnerDistributes.join(','),
          managerInfoId:sessionStorage.getItem('userId')
        }
        console.log(params)
         let result = await this.API.reqUpdateDistribute(params)
         if(result.retCode == '000'){
            this.$message({
              message: '设置分销利率成功',
              type: 'success'
            }); 
         }
        }
    },
  }
}

</script>
<style lang='stylus' scoped>
.FXset
  height 100%
  .FXset-container
      height 100%
      margin-top 30px
      background #fff
      border-radius 10px
      display flex
      justify-content space-around
      .FXname
        position relative
        width 660px
        height 750px
        border 1px solid #D8E2F0
        border-radius 10px
        padding 30px
        margin-top 30px
        box-shadow 0 0 20px #D8E2F0
        .dot
          position absolute
          width 20px
          height 20px
          border 4px solid #145B3E
          border-radius 50%
          top 20px
          right 20px
        .form1
          .title
            font-size 19px
            margin-bottom 30px
      .FXinterest
        position relative
        width 660px
        height 480px
        border 1px solid #D8E2F0
        border-radius 10px
        padding 30px
        margin-top 30px
        box-shadow 0 0 20px #D8E2F0
        .dot
          position absolute
          width 20px
          height 20px
          border 4px solid #145B3E
          border-radius 50%
          top 20px
          right 20px
        .form2
          .title
            font-size 19px
            margin-bottom 30px
</style>